
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('百度ECharts')" />
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>折线图</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="javascript:;">选项1</a>
                            </li>
                            <li><a href="javascript:;">选项2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-line-chart"></div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>柱状图</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="javascript:;">选项1</a>
                            </li>
                            <li><a href="javascript:;">选项2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">

                    <div class="echarts" id="echarts-bar-chart"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>饼状图</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="javascript:;">选项1</a>
                            </li>
                            <li><a href="javascript:;">选项2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-pie-chart"></div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>雷达图</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="javascript:;">选项1</a>
                            </li>
                            <li><a href="javascript:;">选项2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-radar-chart"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script type="text/javascript">
    $(function () {
      /*<![CDATA[*/
      var lineChart = echarts.init(document.getElementById("echarts-line-chart"));
      var lineoption = {
          title : {
              text: '未来一周气温变化'
          },
          tooltip : {
              trigger: 'axis'
          },
          legend: {
              data:['最高气温','最低气温']
          },
          grid:{
              x:40,
              x2:40,
              y2:24
          },
          calculable : true,
          xAxis : [
              {
                  type : 'category',
                  boundaryGap : false,
                  data : ['周一','周二','周三','周四','周五','周六','周日']
              }
          ],
          yAxis : [
              {
                  type : 'value',
                  axisLabel : {
                      formatter: '{value} °C'
                  }
              }
          ],
          series : [
              {
                  name:'最高气温',
                  type:'line',
                  data:[11, 11, 15, 13, 12, 13, 10],
                  markPoint : {
                      data : [
                          {type : 'max', name: '最大值'},
                          {type : 'min', name: '最小值'}
                      ]
                  },
                  markLine : {
                      data : [
                          {type : 'average', name: '平均值'}
                      ]
                  }
              },
              {
                  name:'最低气温',
                  type:'line',
                  data:[1, -2, 2, 5, 3, 2, 0],
                  markPoint : {
                      data : [
                          {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                      ]
                  },
                  markLine : {
                      data : [
                          {type : 'average', name : '平均值'}
                      ]
                  }
              }
          ]
      };
      lineChart.setOption(lineoption);
      $(window).resize(lineChart.resize);

      var barChart = echarts.init(document.getElementById("echarts-bar-chart"));
      var baroption = {
          title : {
              text: '某地区蒸发量和降水量'
          },
          tooltip : {
              trigger: 'axis'
          },
          legend: {
              data:['蒸发量','降水量']
          },
          grid:{
              x:30,
              x2:40,
              y2:24
          },
          calculable : true,
          xAxis : [
              {
                  type : 'category',
                  data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
              }
          ],
          yAxis : [
              {
                  type : 'value'
              }
          ],
          series : [
              {
                  name:'蒸发量',
                  type:'bar',
                  data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                  markPoint : {
                      data : [
                          {type : 'max', name: '最大值'},
                          {type : 'min', name: '最小值'}
                      ]
                  },
                  markLine : {
                      data : [
                          {type : 'average', name: '平均值'}
                      ]
                  }
              },
              {
                  name:'降水量',
                  type:'bar',
                  data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                  markPoint : {
                      data : [
                          {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
                          {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                      ]
                  },
                  markLine : {
                      data : [
                          {type : 'average', name : '平均值'}
                      ]
                  }
              }
          ]
      };
      barChart.setOption(baroption);

      window.onresize = barChart.resize;


      var pieChart = echarts.init(document.getElementById("echarts-pie-chart"));


        // 获取后端传递的数据
        const categories = [];
        const dataCountByCategory = [[${dataCountByCategory}]];

        // 将 List<Map<String, Integer>> 转换成 ECharts 饼图需要的格式
        const pieData = [];

        for (let i = 0; i < dataCountByCategory.length; i++) {
            const item = dataCountByCategory[i];
            console.log(item);
            const key = Object.keys(item)[0];
            const name = item[Object.keys(item)[1]]
            categories.push(name);
            const value = item[key];
            pieData.push({
                name: name,
                value: value
            });
        }

console.log(categories);
        console.log(pieData);


      var pieOption = {
          title : {
              text: '联系人分类数据汇总',
              subtext: 'contact_info a JOIN contact_category c ON a.category_id = c.category_id',
              x:'center'
          },
          tooltip : {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
              orient : 'vertical',
              x : 'left',
              data: categories
          },
          calculable : true,
          series : [
              {
                  name:'访问来源',
                  type:'pie',
                  radius : '55%',
                  center: ['50%', '60%'],
                  data: pieData
              }
          ]
      };
      pieChart.setOption(pieOption);
      $(window).resize(pieChart.resize);

      var radarChart = echarts.init(document.getElementById("echarts-radar-chart"));
      var radarOption = {
          title : {
              text: '预算 vs 开销',
              subtext: '纯属虚构'
          },
          tooltip : {
              trigger: 'axis'
          },
          legend: {
              orient : 'vertical',
              x : 'right',
              y : 'bottom',
              data:['预算分配','实际开销']
          },
          polar : [
             {
                 indicator : [
                     { text: '销售', max: 6000},
                     { text: '管理', max: 16000},
                     { text: '信息技术', max: 30000},
                     { text: '客服', max: 38000},
                     { text: '研发', max: 52000},
                     { text: '市场', max: 25000}
                  ]
              }
          ],
          calculable : true,
          series : [
              {
                  name: '预算 vs 开销',
                  type: 'radar',
                  data : [
                      {
                          value : [4300, 10000, 28000, 35000, 50000, 19000],
                          name : '预算分配'
                      },
                       {
                          value : [5000, 14000, 28000, 31000, 42000, 21000],
                          name : '实际开销'
                      }
                  ]
              }
          ]
      };

      radarChart.setOption(radarOption);
      $(window).resize(radarChart.resize);

   /*]]>*/

    });
</script>
</body>
</html>